import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  ListView,
  ScrollView,
  Dimensions,
  Animated,
  Easing
} from 'react-native';

export default class UFO extends React.Component {
  constructor(props) {
    super(props);

    this.state = { show: true };

    this.left = new Animated.Value(0);
    this.top = new Animated.Value(0);
  }

  fly = (start, end) => {
    if (!start || typeof start.x !== 'number' || !end || typeof end.x !== 'number') {
      return;
    }

    // this.setState(
    //   {
    //     show: true
    //   },
    //   () => {
        Animated.parallel([
          Animated.timing(this.left, {
            toValue: start.x,
            duration: 0
          }),
          Animated.timing(this.top, {
            toValue: start.y,
            duration: 0
          })
        ]).start(() => {
          Animated.parallel([
            Animated.timing(this.left, {
              toValue: end.x,
              duration: 600
            }),
            Animated.timing(this.top, {
              toValue: end.y,
              easing: Easing.bezier(0.395, -0.6, 0.75, 0.75),
              duration: 600
            })
          ]).start(() => {});
        });
    //   }
    // );
  };

  render() {
    if ((this.state || {}).show !== true) {
      return null;
    }
    return <Animated.View 
            style={[styles.UFO, { left: this.left, top: this.top }]} 
            
            />;
  }
}

const styles = StyleSheet.create({
  UFO: {
    position: 'absolute',
    width: 15,
    height: 15,
    backgroundColor: 'blue',
    zIndex: 500,
    borderRadius: 10,
    
  }
});
